const CracoLessPlugin = require('craco-less');
const px2rem = require('postcss-pxtorem');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
          },
        },
        // css module
        modifyLessRule: function() {
          return {
            test: /\.module\.less$/,
            exclude: /node_modules/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options:{
                  modules: {
                    localIdentName: '[local]_[hash:base64:6]',
                  },
                }
              },
              {
                loader:require.resolve('postcss-loader'),
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    px2rem({
                      rootValue: 50, // 换算的基数
                      propList: ['*'],
                    })
                  ]
                }
              },
              { loader: 'less-loader' },
            ]
          }
        }
      },
    },
  ],
};
